<template>
  <view class="main">
    <view class="main_header u-p-t-10 u-p-b-20">
      <view class="avatar">
        <u--image width="110rpx" height="110rpx" mode="aspectFit" :src="avatar || '/static/profile.png'"/>
      </view>
      <view class="user-info u-p-l-30 u-p-r-20">
        <view class="text u-p-t-10 u-p-b-10">{{ name || '游客' }}</view>
        <view v-if="!Boolean(name)" class="text u-info-light u-font-24">登录之后可以使用更多功能</view>
        <view v-else class="text u-info-light u-font-24">{{ getOrganizations }}</view>
      </view>
    </view>
    <u-cell-group :border="false" :custom-style="{ background: '#ffffff' }">
      <u-cell icon="lock-fill" title="修改密码" :isLink="true" url="/pages/login/reset" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }"/>
      <u-cell icon="trash-fill" title="清除缓存" :isLink="true" @click="handleClear" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }"/>
      <u-cell icon="hourglass-half-fill" title="关于我们" :isLink="true" url="/pages/system/about" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }"/>
      <u-cell icon="integral-fill" title="隐私条款" :isLink="true" url="/pages/system/privacy" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }" />
      <u-cell icon="weixin-circle-fill" title="解绑微信" :isLink="true" @click="handleUnbind" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }"/>
      <u-cell icon="bookmark-fill" title="版本信息" :isLink="false" :value="appVersion" :iconStyle="{ fontSize:'42rpx',color:'#4368D6' }" :titleStyle="{ color:'#2f2f2f',fontSize:'30rpx' }" :rightIconStyle="{ fontSize:'28rpx' }"/>
    </u-cell-group>
    <view class="u-p-t-40 u-p-b-20 u-p-l-20 u-p-r-20">
      <u-button color="#4870da" @click="logout">退 出</u-button>
    </view>
  </view>
</template>

<script>
import { apiLogOut, unBindOpenid } from '@api/sys/users';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      appVersion: process.env.VUE_APP_VERSION
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'organizations',
      'userType'
    ]),
    getOrganizations() {
      return this.organizations[0]?.name ?? '';
    }
  },
  methods: {
    handleClear() {
      uni.showLoading({ title: '清理中......' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '清除完成' })
      }, 1500)
    },
    logout() {
      apiLogOut().then(result => {
        if (result && result.success) {
          this.$store.dispatch('user/logOut').then(() => {
            uni.reLaunch({
              url: '/pages/login/login'
            })
          })
        } else {
          uni.showToast({
            title: '退出失败',
            icon: 'error',
            duration: 2000
          });
        }
      });
    },
    handleUnbind() {
      uni.showModal({
        title: '提示',
        content: '是否确定解绑微信！',
        success: res => {
          if (res.confirm) {
            unBindOpenid().then(res => {
              const { success, message } = res;
              if (success) {
                this.logout();
              } else {
                uni.showModal({
                  showCancel: false,
                  content: String(message)
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  background: #f2f2f2;
  .main_header {
    color: #ffffff;
    background: #4870da;
    text-align: center;

    .avatar {
      width: rpx(120);
      height: rpx(120);
      border-radius: 50%;
      border: 2px solid #4368D6;
      background: #ffffff;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
  }
}
</style>
